<template>
  <div id="main"
       ref="myChart"
       style="width: 600px;height:400px;"></div>
</template>

<script>
import { onMounted, getCurrentInstance } from "vue"

export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  setup(props, ctx1) {
    console.log(props.data, ctx1, "xxx")
    const { ctx } = getCurrentInstance()
    console.log(ctx, "ctx")
    onMounted(() => {
      ctx.setChart(ctx.echarts, props.data)
    })
  },
  methods: {
    drawLine(echarts, dom, option) {
      const myChart = echarts.init(dom)
      myChart.setOption(option)
      // 当浏览器窗口发生变化的时候调用div的resize方法
      window.onresize = () => {
        myChart.resize()
      }
    },
    setChart(echarts, option) {
      const dom = this.$refs.myChart
      this.drawLine(echarts, dom, option)
    }
  }
}
</script>
